import React, { Component, useMemo, useState } from "react";
import { View, Image, Text, Button } from "@tarojs/components";
import Taro from "@tarojs/taro";

import styles from "./index.module.scss";
import MiniHeader from "@/components/UI/MiniHeader";
import cn from "@/utils/classnames";
import { AtSearchBar } from "taro-ui";
import SchoolView from "@/components/business/SchoolView";
import API from "@/api";
import { DropdownMenu, DropdownMenuOffEmitter } from "@/components/UI/DropdownMenu";
import { Checkbox } from "@/components/UI/Checkbox";
const typeList = [
  {
    label: "不限",
    value: 1,
  },
  {
    label: "一流大学",
    value: 1,
  },
  {
    label: "一流学科",
    value: 1,
  },
  {
    label: "985工程",
    value: 1,
  },
  {
    label: "211工程",
    value: 1,
  },
  {
    label: "省重点/省部共建",
    value: 1,
  },
  {
    label: "普通本科（公办）",
    value: 1,
  },
  {
    label: "普通本科（民办）",
    value: 1,
  },
  {
    label: "骨干/示范/特色高职",
    value: 1,
  },
  {
    label: "普通高职",
    value: 1,
  },
];
const batchList = [
  {
    label: "不限",
    value: 1,
  },
  {
    label: "本科提前批",
    value: 1,
  },
  {
    label: "本科第一批",
    value: 1,
  },
  {
    label: "本科第二批",
    value: 1,
  },
  {
    label: "本科第三批",
    value: 1,
  },
  {
    label: "专科提前批",
    value: 1,
  },
  {
    label: "高职专科批",
    value: 1,
  },
  {
    label: "其他批次",
    value: 1,
  },
];
const yearsList = new Array(5).fill(new Date().getFullYear()).map((i, index) => {
  return {
    label: i - index + "年",
    value: i - index,
  };
});
yearsList.unshift({
  label: "不限",
  value: -1,
});
export default function() {
  const [text, setText] = useState("");
  const [type, setType] = useState(0); // 0 分数 1 高校
  function onSearch() {
    API.School.search(text);
  }
  return (
    <View
      className={cn(styles.page, "page")}
      onClick={() => {
        DropdownMenuOffEmitter();
      }}
    >
      <MiniHeader title="数据系统" transparent={false} hideHome></MiniHeader>

      <View className={cn("pageContent", "flex", "flex-column")}>
        <View className={cn("flex-none")}>
          {/* tabs */}
          <View className={cn("flex-none", "flex", styles.tabWrap)}>
            <View
              className={cn("flex-1", "flex-center")}
              onClick={() => {
                setType(0);
              }}
            >
              <View
                className={cn(styles.tabItem, {
                  [styles.active]: type === 0,
                })}
              >
                按分数
              </View>
            </View>
            <View
              className={cn("flex-1", "flex-center")}
              onClick={() => {
                setType(1);
              }}
            >
              <View
                className={cn(styles.tabItem, {
                  [styles.active]: type === 1,
                })}
              >
                按高校
              </View>
            </View>
          </View>
          {/* 搜索框 */}
          <AtSearchBar
            value={text}
            onChange={v => {
              setText(v);
            }}
            onActionClick={onSearch}
            onConfirm={onSearch}
            placeholder="请输入高校名称"
          ></AtSearchBar>
          {/* 筛选器 */}
          <View className={styles.filterWrap}>
            <DropdownMenu
              renderContent={
                <View>
                  {yearsList.map(item => (
                    <View
                      className={cn(styles.cell, {
                        [styles.active]: true,
                      })}
                    >
                      <View>{item.label}</View>
                      <Checkbox checked onChange={console.log} />
                    </View>
                  ))}
                </View>
              }
            >
              年份
            </DropdownMenu>
            <DropdownMenu
              renderContent={
                <View>
                  {typeList.map(item => (
                    <View
                      className={cn(styles.cell, {
                        [styles.active]: true,
                      })}
                    >
                      <View>{item.label}</View>
                      <Checkbox checked onChange={console.log} />
                    </View>
                  ))}
                </View>
              }
            >
              层次
            </DropdownMenu>
            <DropdownMenu
              renderContent={
                <View>
                  {batchList.map(item => (
                    <View
                      className={cn(styles.cell, {
                        [styles.active]: true,
                      })}
                    >
                      <View>{item.label}</View>
                      <Checkbox checked onChange={console.log} />
                    </View>
                  ))}
                </View>
              }
            >
              批次
            </DropdownMenu>
          </View>
        </View>
        <View className={cn("flex-auto")}>
          <SchoolView></SchoolView>
          <SchoolView></SchoolView>
          <SchoolView></SchoolView>
        </View>
      </View>
    </View>
  );
}
